<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/admin/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/admin/css/public.css" media="all">
    <link rel="stylesheet" href="/static/admin/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>

<body>
    <div class="layui-form layuimini-form">

        <form id="DataForm" action="" method="POST" class="layui-form layui-form-pane">
            <div class="layui-tab layui-tab-brief" lay-filter="itemTab">
                <ul class="layui-tab-title">
                    <li lay-id="itemTab_1" class="layui-this">基本信息</li>
                  


                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">

                        <div class="layui-form-item">
                            <label class="layui-form-label">商品分类</label>
                            <div class="layui-input-block">
                                <select name="info[cate_id]"  lay-filter="cate_id">
                                    <option value="0">请选择商品分类</option>
                                    {foreach $cate as $val}
                                    <optgroup label="{$val.title}">
                                        {foreach $val.list as $item}
                                        <option value="{$item.id}">{$item.title}</option>
                                        {/foreach}
                                    </optgroup>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                        <!-- <div class="layui-form-item">
                            <label class="layui-form-label">商品信息</label>
                            <div class="layui-input-block">
                                <input type="text" placeholder="选择商品信息" autocomplete="off" class="layui-input"
                                id="goods_select" value="">
                            <input type="hidden" autocomplete="off" class="layui-input" id="goods_id"
                                name="info[goods_id]" value="">
                            </div>
                        </div>
                            -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品信息</label>
                            <div class="layui-input-block">
                                <input type="text" placeholder="选择商品信息" autocomplete="off" class="layui-input"
                                id="goods_sku_select" value="">
                            <input type="hidden" autocomplete="off" class="layui-input" id="goods_sku_id"
                                name="info[goods_sku_id]" value="">
                            </div>
                        </div>


                        <div class="layui-form-item">
                            <label class="layui-form-label">数量</label>
                            <div class="layui-input-block">
                                <input type="number" name="info[num]" placeholder="请输入库存" autocomplete="off"
                                    class="layui-input" value="0" readonly id="num">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">销售价格</label>
                            <div class="layui-input-inline">
                                <input type="number" name="info[x_money]" placeholder="请输入库存" autocomplete="off"
                                    class="layui-input" value="0" id="x_money">
                            </div>
                            <div class="layui-form-mid layui-word-aux" style="color: red;">商品原价：<span  id="money">0.00</span></div>
                          
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block" style="margin:auto;text-align: center;">
                                <button type="button" class="upButton layui-btn layui-btn-primary" id="closeButton"><i
                                        class="fa fa-level-up"></i> 关闭</button>
                                <button id="saveButton" type="submit" class="layui-btn"><i class="fa fa-check"></i>
                                    提交</button>
                            </div>
                        </div>

                    </div>



                </div>
            </div>
        </form>

    </div>
    <script src="/static/admin/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="/static/admin/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script src="/static/admin/sortable/Sortable.min.js"></script>
    <script>
        layui.use(['layer', 'form', 'laydate', 'element', 'upload','tableSelect','wangEditor'], function () {
            var member_level;
            var form = layui.form;
            var    tableSelect = layui.tableSelect;
            var $ = layui.$, layer = layui.layer, table = layui.table, element = layui.element, laydate = layui.laydate, form = layui.form, upload = layui.upload;
            var indexFrame = parent.layer.getFrameIndex(window.name); //获取窗口索引
            var wangEditor = layui.wangEditor;
            laydate.render({
                elem: '#end_time',
                type:"datetime"
            });

   
          
            $("#closeButton").on('click', function () {
                parent.layer.close(indexFrame);
            })

            // 分步表单下一步
            $(".downButton").on('click', function () {
                var id = $(".layui-this").next().attr('lay-id');
                element.tabChange('itemTab', id);
            });
            // 分步表单上一步
            $(".upButton").on('click', function () {
                var id = $(".layui-this").prev().attr('lay-id');
                element.tabChange('itemTab', id);
            });

            upload.render({
                elem: '#upload_img', url: "{:url('common/images')}", done: function (res) {
                    $("#img").val(res.data.name);
                    layer.msg(res.msg);
                }
            });

            tableSelect.render({
                elem: '#goods_select',
                checkedKey: 'id',
                searchKey: 'title',
                table: {
                 
                    url: '/agent/system.goods/goods',
                    cols: [[
                        { type: 'radio',fixed: 'left'},
                        { field: 'id', title: 'ID', width:80},
                        { field: 'title', title: '名称', width:380},
                    ]]
                },
                done: function (elem, data) {
                    var idArr = []
                    var title = []
                    layui.each(data.data, function (index, item) {
                        title.push(item.title)
                        idArr.push(item.id);
                    })
                    $("#goods_id").val(idArr.join(","));
            
                    $("#goods_select").val(title.join(","));
                }
            })
            form.on('select(cate_id)', function(data){
                cate(data.value)
            });
            cate(0);
            function cate(cate_id){
                    tableSelect.render({
                    elem: '#goods_sku_select',
                    checkedKey: 'id',
                    searchKey: 'title',
                    table: {
                        where:{'cate_id':cate_id},
                        url: '/agent/system.goods/goods_sku',
                        autoWidth: true,
                        cols: [[
                            { type: 'radio',fixed: 'left'},
                            { field: 'id', title: 'ID', width:80},
                            { field: 'title', title: '名称', width:200},
                            { field: 'sku_title', title: 'sku名称', width:200},
                            { field: 'money', title: '原价价格', width:80},
                            { field: 'stock', title: '库存', width:80},
                        ]]
                    },
                    done: function (elem, data) {
                        var idArr = []
                        var title = []
                        var money = []
                        var num = []
                        layui.each(data.data, function (index, item) {
                            title.push(item.title)
                            money.push(item.money)
                            idArr.push(item.id);
                            num.push(item.stock);
                        })
                        $("#goods_sku_id").val(idArr.join(","));
                        $("#goods_sku_select").val(title.join(","));
                        $("#money").html(money.join(","));
                        $("#num").val(num.join(","));
                    }
                })
            }
         
            $("#saveButton").on('click', function () {
                var loading = layer.open({ type: 3 });
                var data = $("#DataForm").serialize()
                $.ajax({
                    url: "{:url('add')}",
                    type: 'post',
                    data: data,
                    success: function (data) {
                        console.log(data);
                        layer.close(loading);
                        if (data.code == 0) {
                            parent.tableReload();
                            parent.layer.close(indexFrame);
                            parent.layer.msg(data.msg);
                        } else {
                            layer.msg(data.msg);
                        }
                    }
                })
                return false;
            })
         
        });
    </script>
</body>

</html>